<template>
  <edu-mescroll-uni @init="mescrollInit" @down="refresh" @up="reachBottom">
    <view class="coupon-view">
      <view
        class="item"
        :class="[type == 'usable' ? couponBgColorClass[item.coupon_type] : '', type]"
        v-for="(item, index) in couponList"
        :key="index"
      >
        <view class="left">
          <view class="top" v-if="item.coupon_type == 1">
            <text class="big">{{ item.price | formatCurrency }}</text>
            {{ `满${parseFloat(item.maxprice)}使用` }}
          </view>
          <view class="top" v-else-if="item.coupon_type == 2">
            <text class="big">{{ parseFloat(item.discount) }}折</text>
          </view>
          <view class="top" v-else-if="item.coupon_type == 3"><text class="big">课程卡</text></view>
          <view class="type u-line-1" v-if="item.coupon_type == 3"
            >仅限{{ item.course_title }}使用</view
          >
          <view class="type u-line-1" v-else>仅限{{ item.school_name }}使用</view>
          <view v-if="item.use_etime == -1" class="date">永久有效</view>
          <view v-else class="date u-line-1"
            >有效期{{ item.use_stime | timeFormat('yyyy.mm.dd') }}至{{
              item.use_etime | timeFormat('yyyy.mm.dd')
            }}</view
          >
        </view>
        <view class="right">
          <view class="btn" :round="true" @click="useCoupon(item)" v-if="type == 'usable'"
            >使用</view
          >
          <view class="text" v-else-if="type == 'used'">已使用</view>
          <view class="text" v-else-if="type == 'expired'">已过期</view>
        </view>
      </view>
    </view>
  </edu-mescroll-uni>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      couponList: [],
      couponBgColorClass: { 1: 'youhui', 2: 'dazhe', 3: 'kechengka' },
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  methods: {
    refresh() {
      this.mescroll.resetUpScroll()
    },
    reachBottom(page) {
      this.$edu.api
        .getUserCouponList(this.type, {
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res

          let total = data.total
          let list = data.data

          if (page.num == 1) this.couponList = []
          this.couponList = this.couponList.concat(list)
          this.mescroll.endBySize(list.length, total)
        })
    },
    // 使用卡卷
    useCoupon(item) {
      if (item.coupon_type == 3) {
        this.$edu.api
          .postCourseCouponExchange({
            id: item.id,
          })
          .then((res) => {
            this.$u.toast(res.msg)
            this.mescroll.resetUpScroll(false)
            this.mescroll.scrollTo(0, 0)
          })
      } else {
        // #ifdef H5
        window.location.href = `${item.mhm_sdn}`
        // #endif
        // #ifndef H5
        this.$u.route('/pageFound/school/course', {
          id: item.mhm_id,
        })
        // #endif
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.coupon-view {
  padding: 32rpx 30rpx 0;
  .item {
    height: 182rpx;
    margin-bottom: 32rpx;
    display: flex;
    align-items: center;
    background-image: var(--bg-img);
    background-size: cover;
    background-repeat: no-repeat;
    .left {
      width: 70%;
      padding: 20rpx 25rpx;
      color: var(--main-color);
      .top {
        font-size: 28rpx;
        .big {
          font-size: 40rpx;
          font-weight: 400;
          margin-right: 10rpx;
        }
      }
      .type {
        font-size: 24rpx;
        margin-top: 18rpx;
      }
      .date {
        margin-top: 6rpx;
        font-size: 24rpx;
      }
    }
    .right {
      width: 30%;
      display: flex;
      .btn {
        margin-left: auto;
        margin-right: auto;
        width: 150rpx;
        height: 68rpx;
        border-radius: 34rpx;
        font-size: 30rpx;
        color: #ffffff;
        line-height: 68rpx;
        text-align: center;
        background-color: var(--main-color);
      }
      .text {
        margin-left: auto;
        margin-right: auto;
        font-size: 30rpx;
        color: $edu-tips-color;
        font-weight: 400;
      }
    }
  }
  .usable.youhui {
    --main-color: #ff8a52;
    --bg-img: url('@/pageCourse/static/images/youhuiquan.png');
  }
  .usable.dazhe {
    --main-color: #ff9431;
    --bg-img: url('@/pageCourse/static/images/dazhe_bg.png');
  }
  .usable.kechengka {
    --main-color: #67c23a;
    --bg-img: url('@/pageCourse/static/images/kechengka.png');
  }
  .used,
  .expired {
    --main-color: $edu-tips-color;
    --bg-img: url('@/pageCourse/static/images/kaquan_grey.png');
  }
}
</style>
